<template>
  <a class="daily-item">
    <div class="daily-img" v-if="imgUrl">
      <img :src="imgUrl" alt="" />
    </div>
    <div class="daily-title" :class="{ noImg: !imgUrl }">{{ data.title }}</div>
  </a>
</template>

<script>
export default {
  name: "Item",
  props: ["data"],
  computed: {
    imgUrl() {
      return this.data.images[0];
    },
  },
};
</script>

<style>
.daily-item {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.daily-item:hover {
  background-color: #e3e8ee;
}
.daily-img {
  width: 80px;
  height: 80px;
  float: left;
  margin-right: 6px;
}
.daily-img img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.daily-title.noImg {
  padding-left: 5px;
}
</style>